<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style type="text/css">
    /*
    	animation参数：
    	animation-name:通过@keyframes 定义的动画名称;
    	animation-duration:动画完成的周期时间;
    	animation-delay：动画延迟时间执行
    	animation-iteration-count:动画循环的次数;
    	animation-direction ：动画在循环中是否反向运动
    	animation-fill-mode ：检索或设置对象动画时间之外的状态

    	animation-play-state：paused || running
	

     */

    #box {
        height: 300px;
        width: 300px;
        background: red;
        position: relative;
        -webkit-animation: divmove 5s linear infinite 1s alternate;
        -moz-animation: divmove 5s linear infinite 1s alternate;
        animation: divmove 5s linear infinite 1s alternate;
    }

    #box .state {
        -webkit-animation-play-state: paused;
        -moz-animation-play-state: paused;
        animation-play-state: paused;
    }

    @-webkit-keyframes divmove {
        from {
            left: 0;
        }
        to {
            left: 300px;
        }
    }

    @-moz-keyframes divmove {
        from {
            left: 0;
        }
        to {
            left: 300px;
        }
    }

    @keyframes divmove {
        from {
            left: 0;
        }
        to {
            left: 300px;
        }
    }
    </style>
</head>

<body>
    <!-- 
	    /*
			 	注意：	1：animation的浏览器兼容性问题，-moz- -webkit-
			 			2：sublime 快捷键ctrl+alt+x快速生成css前缀代码，好像必须是css文件里的样式，style标签里的
			 				css代码不行
			 			3：

			 * 
			 * */ -->
    <div id="box"></div>
    <button id="btn">切换</button>
    <script src="jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    var box = $("#box");
    var btn = $("#btn");
    
    btn.on("click", function() {
        // 通过js给动画dom添加animation-play-state :paused暂停。running进行中
        box.css('animation-play-state', "paused");
        // 用css类好像不起作用
        // box.toggleClass("state");
    })
    </script>
</body>

</html>